<template>
  <div class="tinymce-editor">
    <editor v-model="myValue"
            :init="init"
            :disabled="disabled"
            @onClick="onClick">
    </editor>
  </div>
</template>

<script>
  import tinymce from 'tinymce/tinymce'
  import Editor from '@tinymce/tinymce-vue'
  import 'tinymce/themes/silver/theme'
  import '../f-tinymce/plugins/index'
  import 'tinymce/icons/default/icons'
  import 'tinymce/skins/ui/oxide/skin.min.css'
  import 'tinymce/skins/ui/oxide/content.min.css'
  import '../f-tinymce/zh_CN.js'
  export default {
    name: 'f-tinymce',
    components: {
      Editor
    },
    props: {
      // 传入一个value，使组件支持v-model绑定
      value: {
        type: String,
        default: ''
      },
      disabled: {
        type: Boolean,
        default: false
      },
      plugins: {
        type: [String, Array],
        default: 'print media preview searchreplace autolink directionality visualblocks visualchars fullscreen image link template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave indent2em autoresize lineheight '// formatpainter axupimgs pastetext bdmap
      },
      toolbar: {
        type: [String, Array],
        default: 'code undo redo restoredraft | cut copy paste | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify | indent2em outdent indent lineheight | styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen |'
      }
    },
    data () {
      return {
        // 初始化配置
        init: {
          language: 'zh_CN',
          height: 300,
          plugins: this.plugins,
          toolbar: this.toolbar,
          branding: false,
          min_height: 400,
          max_height: 930,
          toolbar_mode: 'wrap',
          menubar: true,
          // 此  处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
          // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
          images_upload_handler: (blobInfo, success, failure) => {
            const img = 'data:image/jpeg;base64,' + blobInfo.base64()
            success(img)
          },
          file_picker_callback: (callback, value, meta) => {
            // 文件分类
            var filetype = '.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4'
            // 模拟出一个input用于添加本地文件
            var input = document.createElement('input')
            input.setAttribute('type', 'file')
            input.setAttribute('accept', filetype)
            input.click()
            let that = this
            input.onchange = function () {
              let file = this.files[0]
              that.filePickerCallback(callback, value, meta, file)
            }
          }
        },
        myValue: this.value
      }
    },
    mounted () {
      tinymce.init({})
    },
    methods: {
      // 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
      // 需要什么事件可以自己增加
      onClick (e) {
        this.$emit('onClick', e, tinymce)
      },
      // 可以添加一些自己的自定义事件，如清空内容
      clear () {
        this.myValue = ''
      },
      filePickerCallback (callback, value, meta, file) {
        this.$emit('handleUploadFile', callback, value, meta, file)
      }
    },
    watch: {
      value (newValue) {
        this.myValue = newValue
      },
      myValue (newValue) {
        this.$emit('input', newValue)
      }
    }
  }

</script>
<style scoped>
</style>
